<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css">
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			a {
				text-decoration: none;
				color: black;
			}
			
			ul {
				list-style: none;
			}
			
			body {
				background-color: #F5F5F5;
			}
			.main {
				width: 1300px;
				height: 500px;
				margin: auto;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}
			
			.main-item {
				width: 300px;
				height: 450px;
				background-color: white;
				margin: 10px;
				text-align: center;
			}
			
			.main-item a {
				color: black;
			}
			
			.main-item img {
				width: 250px;
				height: 200px;
				margin-top: 30px;
				transition: all 0.6s;
			}
			
			.main-item:hover {
				box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
			}
			.main-item div {
				margin-bottom: 40px;
			}
			.showtime {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				padding: 50px;
			}
			
			.showtime div {
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				background-color: #605751;
				color: white;
			}
			
			.showtime text {
				font-size: 30px;
			}
			
		</style>
		<script>
			window.onload=function(){
				var imgsrc = document.getElementsByClassName('imgsrc');
				for (var i = 0; i < imgsrc.length; i++) {
					imgsrc[i].onmouseover = function() {
						this.style.transform = "scale(1.2)"
					}
					imgsrc[i].onmouseout = function() {
						this.style.transform = ""
					}
				}
				console.log(imgsrc);
				
				
				var showtime = function() {
					var showtime = document.getElementById('showtime');
					var showitem = showtime.getElementsByTagName('div');
					var nowtime = new Date(),
						endtime = new Date("2020/12/31");
					var lefttime = endtime.getTime() - nowtime.getTime(),
						lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),
						leftm = Math.floor(lefttime / (1000 * 60) % 60),
						lefts = Math.floor(lefttime / 1000 % 60);
					showitem[0].innerHTML = lefth;
					showitem[1].innerHTML = leftm;
					showitem[2].innerHTML = lefts;
				}
				var div = document.getElementById("showtime");
				setInterval(function() {
					showtime();
				}, 1000);
				}
			
		</script>
	</head>
	<body>
		<div class="main">
			<div class="main-item" style="background-color: #F1EDED;">
				<div style="margin-top: 70px;">限时秒杀</div>
				<i class="iconfont icon-shandian" style="font-size: 45px;color: red;"></i>
				<div>倒计时</div>
				<div id="showtime" class="showtime">
					<div></div><text>:</text>
					<div></div><text>:</text>
					<div></div>
				</div>
			</div>
			<div class="main-item">
				<a href="index.html">
					<img src="jmg/d2.jpg" class="imgsrc">
					<div>盐湖一日游</div>
				</a>
				<div class="price">￥999元</div>
			</div>
			<div class="main-item">
				<a href="index.html">
					<img src="jmg/d4.jpg" class="imgsrc">
					<div>广州一日游</div>
				</a>
				<div class="price">￥999元</div>
			</div>
			<div class="main-item">
				<a href="index.html">
					<img src="jmg/d5.jpg" class="imgsrc">
					<div>峡谷一日游</div>
				</a>
				<div class="price">￥999元</div>
			</div>
		</div>
	</body>
</html>
